<template>
 <div class="page"  style="width: 70%; background: #ebeef5; color: black; border: 1px solid #FFFFFF;padding: 20px;margin: 20px auto;border-radius: 8px;position: relative;">
   <div>
        <p class="title">实名认证</p>
          <div style="width: 100%;display: flex;justify-content: start;align-items: center">
              <div class="input-form">
                <span>*姓名</span><input v-model="personInfo.xm0000" readonly placeholder="姓名">
              </div>
              <div class="input-form">
                <span>*身份证号</span><input v-model="personInfo.sfzh00" readonly placeholder="身份证号">
              </div>
          </div>
     <div>
       <div  class="input-form">
       <span>人脸采集</span>
       <van-badge v-if="realName.base64">
         <img style="width: 1.8rem;border: 2px solid lightgrey;border-radius: 10px" :src="`data:image/jpeg;base64,${realName.base64}`" alt="add">
         <template #content>
           <van-icon name="cross" class="badge-icon" @click="realName.base64=''"/>
         </template>
       </van-badge>
       <img v-else @click="handleOpenCamera" style="width: 5.6rem;height: 5.6rem;border: 2px solid lightgrey;border-radius: 10px" src="@/assets/paizhao.png" alt="拍照">
         <span style="font-size: small;color: red">点击此处去采集人脸</span>
     </div>
     </div>
     <div>
       <el-button @click="handleConfirm">提交</el-button>
     </div>
   </div>
</div>
</template>

<script>
import {commonApi} from "@/api";

export default {
  name:"person-info",
  data(){
    return {
      title: "",
      from: "",
      baseUrl: import.meta.env.VITE_BASE_URL,
      personInfo: {},
      showDialog: false,
      realName: {
        base64: ""
      }
    }
  },
  async created() {
    window.onCollectPicResult = this.onCollectPicResult
    this.from = this.$route.query.from
  },
  mounted() {
    this.queryInfo()
  },
  methods: {
    jumpTo(url){
      this.$router.push(url)
    },
    queryInfo(){
      commonApi.queryInfo().then((res)=>{
        this.personInfo = {
          ...res.data
        }
      })
    },
    handleOpenCamera(){
      window.android.collectPicUseFrontRgbCamera()
    },
    onCollectPicResult(image){
      if (image){
        this.realName.base64 = image
      } else {
        this.$dialog.alert({
          message: "未获取到人脸照片！",
          title: "系统提示",
          theme: "round-button"
        })
      }
    },
    handleConfirm(){

        if (!this.realName.base64){
          this.$dialog.alert({
            title: "系统提示",
            message: "请先采集人脸",
            theme: "round-button"
          })
          return
        }
        commonApi.uploadBase64({
          base64: "data:image/jpeg;base64,"+this.realName.base64,
          folder: "file/user/face"
        },{
          showLoading: true
        }).then((res)=>{
          const xh = res.data
          commonApi.personRealName({
            sfzh00:this.personInfo.sfzh00,
            xm0000:this.personInfo.xm0000,
            rltpwjxh: xh
          },{
            showLoading: true
          }).then((res)=>{
            this.$dialog.alert({
              message: "已提交实名，可尝试重新登录！",
              title: "系统提示",
              theme: "round-button"
            })

          })
        })


    }
  }
}
</script>
<style scoped lang="less">
.title {
  font-size: 0.4rem;
  color: rgb(14, 1, 1);
  margin: 0.14rem;
}
.input-form {
  width: 100%;
  margin: 0.16rem 0;
  display: flex;
  justify-content: start;
  align-items: center;

  span {
    font-size: 0.4rem;
    color: rgb(12, 10, 10);
    width: 2rem;
    text-align: start;
  }

  input {
    font-size: 0.4rem;
    color: black;
    width: 70%;
    border: none;
    border-radius: 10px;
    padding: 0.16rem;
  }
}

.bottom-btn-group {
  width: 95%;
  display: flex;
  justify-content: end;

  .next-btn {
    width: 2.6rem;
    height: 0.875rem;
    border: none;
    border-radius: 10px;
    font-size: 0.4rem;
    color: white;
    background-color: #359AEB;
    margin-left: 0.1rem;
  }
  .next-btn-small {
    width: 2.2rem;
    height: 0.6rem;
    font-size: 0.35rem;
  }
}

.skill-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.345rem;
  background: whitesmoke;
  border-radius: 15px;
  padding: 0.15rem 0.18rem;
  margin: 0.3rem;
  text-align: start;

  p {
    margin: 0.15rem;
  }
}
.dialog-input-form {
  width: 90%;
  margin: 0.16rem 0;
  display: flex;
  justify-content: start;
  align-items: center;

  span {
    font-size: 0.3rem;
    color: black;
    width: 25%;
    text-align: end;
    margin-right: 0.2rem;
  }

  input {
    font-size: 0.3rem;
    color: black;
    width: 63%;
    border: none;
    border-radius: 10px;
    background: linear-gradient(to left,lightsteelblue,lightblue);
    padding: 0.2rem;
  }

  select {
    font-size: 0.3rem;
    color: black;
    width: 60%;
    border: none;
    border-radius: 10px;
    background: linear-gradient(to left,lightsteelblue,lightblue);
    padding: 0.2rem;
  }
}

.badge-icon {
  display: block;
  font-size: 14px;
  line-height: 20px;
}
</style>
